<template>
	<div class="container">
		<h1 class="title">确认订单</h1>

		<form @submit.prevent="submitOrder" class="form">
			<div class="form-group">
				<label for="name">姓名：</label>
				<input type="text" id="name" v-model="formData.name" required class="form-input" placeholder="请输入收件人姓名">
			</div>

			<div class="form-group">
				<label for="phone">手机号码：</label>
				<input type="tel" id="phone" v-model="formData.phone" required pattern="[0-9]{11}" class="form-input"
					placeholder="请输入收件人手机号码">
			</div>

			<!-- for 属性用于将 <label> 标签与表单元素关联起来，通过指定关联的表单元素的 id 属性实现。
<label for="address">：如果用户点击了 <label for="address">国家：</label>，与其关联的表单元素（通常是一个输入框或下拉框）就会获得焦点，从而让用户可以方便地进行输入或选择。 -->
			<div class="form-group">
				<label for="country">国家：</label>
				<input type="country" id="country" v-model="formData.country" required class="form-input"
					placeholder="中国">
			</div>

			<div class="form-group">
				<label for="province">省份：</label>
				<input type="text" id="province" v-model="formData.province" required class="form-input"
					placeholder="山东省">
			</div>

			<div class="form-group">
				<label for="city">城市：</label>
				<input type="text" id="city" v-model="formData.city" required class="form-input" placeholder="济南市">
			</div>

			<div class="form-group">
				<label for="district">地区：</label>
				<input type="text" id="district" v-model="formData.district" required class="form-input"
					placeholder="历下区">
			</div>

			<div class="form-group">
				<label for="detail">详细地址：</label>
				<input type="text" id="detail" v-model="formData.detail" required class="form-input" placeholder="姚家街道">
			</div>

			<button type="submit" class="submit-btn" @click="submitOrder()">提交订单</button>
		</form>

	</div>
</template>

<script>
	//引入下单接口
	import {
		submit
	} from '../../api/index.js'


	export default {
		data() {
			return {
				formData: {
					name: '',
					phone: '',
					country: '',
					city: '',
					province: '',
					district: '',
					detail: ''
				}
			};
		},
		methods: {
			// 将表单数据提交到服务器进行订单处理
			submitOrder(formData) {
				// 从缓存中获取 skuId、spuId、point
				const skuId = uni.getStorageSync('skuId');
				const spuId = uni.getStorageSync('spuId');
				const point = uni.getStorageSync('point');
				// 从缓存中获取memberId
				const memberid = uni.getStorageSync('memberId');

				console.log('提交订单', this.formData);
				const name = this.formData.name;
				const phone = this.formData.phone;
				const country = this.formData.country;
				const city = this.formData.city;
				const province = this.formData.province;
				const district = this.formData.district;
				const detail = this.formData.detail;

				submit({
						"freight": 0,
						"userId": "26473874049204",
						"memberId": memberid,
						"item": {
							"count": 1,
							"originPoints": point,
							"originPrice": 0,
							"skuId": skuId,
							"spuId": spuId
						},
						"points": point,
						"price": 0,
						"shippingAddress": {
							"address": {
								"city": city,
								"country": country,
								"detail": detail,
								"district": district,
								"province": province
							},
							"name": name,
							"phone": phone
						}
					}).then(response => {
						// 清空表单数据
						this.formData = {
							name: '',
							address: '',
							phone: ''
						};
						// 弹窗
						wx.showToast({
							title: '兑换成功！',
							icon: 'success',
							duration: 2000  // 弹窗持续时间，单位为毫秒
						})
						// 跳转到商品详情
						setTimeout(function() {
						  wx.switchTab({
						    url: '/pages/pointsMall/pointsMall'
						  });
						}, 2000);// 设置定时器，在弹窗显示3秒后跳转到指定页面
					})
					.catch(error => {
						console.log(error.data.message)
						// 弹窗
						wx.showToast({
							title: '下单失败！',
							icon: 'error'
						})
					})
			}
		}
	};
</script>

<style scoped>
	/* scoped关键字，它将样式限定在当前组件内，避免了样式冲突。 */
	.container {

		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 5px;
		/* 设置背景 */
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648f02af5a7e3f031019afbe/648f0d26726ab50011f2463c/16875925342188848724.png');
		/* background-size: cover; */
		/* background-size: 调整背景图片的大小。cover的意思是让图片尽量覆盖整个背景区域，保持比例的同时可能会裁剪部分图片内容。当背景区域与图片的宽高比例不同时，图片会被放大或缩小以完全覆盖背景区域。 */
		/* 设置背景图片高度 */
		background-size: 100% auto;
		/* 为了确保背景图片的宽高比例不变，background-size属性的高度值设置为auto */
		/* height: 600px; */
		background-repeat: no-repeat;
		/* background-repeat:用于控制背景图片是否重复平铺。no-repeat表示不重复平铺，即只显示一张图片。 */
		background-position: center;
		/* background-position:用于调整背景图片的位置。center表示将图片居中显示在背景区域。 */
	}

	.title {
		font-size: 34px;
		color: #ffffff;
		font-weight: bold;
		/* 设置字体加粗 */
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
		/* 添加文本阴影 */
		margin-top: 10px;
		/* 设置上边距为 10px */
		margin-bottom: 10px;
		/* 设置下边距为 10px */
	}

	.form {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		/* width: 300px; */
		padding: 20px;
		border: 1px solid #ccc;
		border-radius: 20px;
		/* background-color: #fef4f4; */
		background-color: rgba(254, 244, 244, 0.5);
		/* 增加表单左右边距，margin+width=300 */
		width: 250px;
		margin-left: 25px;
		margin-right: 25px;

	}

	.form-group {
		margin-bottom: 15px;
	}

	label {
		font-weight: bold;
		margin-right: 5px;
		color: #872929;
	}

	.form-input {
		width: 100%;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
		outline: none;
		background-color: #fef4f4;
	}

	.submit-btn {
		padding: 10px 20px;
		border: none;
		border-radius: 4px;
		background-color: #872929;
		color: #fff;
		cursor: pointer;
		/* 用于指定当鼠标悬停在一个元素上时，鼠标指针的样式。将 pointer 作为属性值时，鼠标指针将会从默认的箭头指针变成手型图标，表示该区域是可点击的。 */
		margin-left: 50px;
		margin-top: 30px;
	}

	.submit-btn:hover {
		background-color: #6a1e1e;
	}

	.dragon-boat {
		margin-top: 30px;
		width: 200px;
	}
</style>
